<template>
  <div class="creator-resources">
    <div class="page-header">
      <h1 class="page-title">创作者资源中心</h1>
      <p class="page-desc">这里提供各种资源和工具，帮助您成为优秀的创作者</p>
    </div>

    <div class="filter-section">
      <el-input
        placeholder="搜索资源"
        v-model="searchQuery"
        class="search-input"
        prefix-icon="el-icon-search"
        @input="handleSearch"
      ></el-input>
      <el-radio-group v-model="currentCategory" @change="handleCategoryChange">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="guide">创作指南</el-radio-button>
        <el-radio-button label="tool">创作工具</el-radio-button>
        <el-radio-button label="template">模板素材</el-radio-button>
        <el-radio-button label="video">视频教程</el-radio-button>
      </el-radio-group>
    </div>

    <div class="resources-container" v-loading="loading">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="推荐资源" name="recommended">
          <div class="resources-list">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="resource in displayResources" :key="resource.id">
                <div class="resource-card">
                  <div class="resource-header">
                    <div class="resource-icon">
                      <i :class="getResourceIcon(resource.type)"></i>
                    </div>
                    <div class="resource-type">{{ getResourceTypeText(resource.type) }}</div>
                  </div>
                  <div class="resource-body">
                    <h3 class="resource-title">{{ resource.title }}</h3>
                    <p class="resource-desc">{{ resource.description }}</p>
                  </div>
                  <div class="resource-footer">
                    <div class="resource-meta">
                      <span class="views">
                        <i class="el-icon-view"></i> {{ resource.views }}
                      </span>
                      <span class="downloads">
                        <i class="el-icon-download"></i> {{ resource.downloads }}
                      </span>
                    </div>
                    <el-button type="primary" size="small" @click="viewResource(resource)">
                      {{ getActionText(resource.type) }}
                    </el-button>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="totalResources"
              :page-size="pageSize"
              :current-page.sync="currentPage"
              @current-change="handlePageChange"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="最新资源" name="latest">
          <div class="resources-list">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="resource in displayResources" :key="resource.id">
                <div class="resource-card">
                  <div class="resource-header">
                    <div class="resource-icon">
                      <i :class="getResourceIcon(resource.type)"></i>
                    </div>
                    <div class="resource-type">{{ getResourceTypeText(resource.type) }}</div>
                  </div>
                  <div class="resource-body">
                    <h3 class="resource-title">{{ resource.title }}</h3>
                    <p class="resource-desc">{{ resource.description }}</p>
                  </div>
                  <div class="resource-footer">
                    <div class="resource-meta">
                      <span class="views">
                        <i class="el-icon-view"></i> {{ resource.views }}
                      </span>
                      <span class="downloads">
                        <i class="el-icon-download"></i> {{ resource.downloads }}
                      </span>
                    </div>
                    <el-button type="primary" size="small" @click="viewResource(resource)">
                      {{ getActionText(resource.type) }}
                    </el-button>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="totalResources"
              :page-size="pageSize"
              :current-page.sync="currentPage"
              @current-change="handlePageChange"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="热门资源" name="popular">
          <div class="resources-list">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="resource in displayResources" :key="resource.id">
                <div class="resource-card">
                  <div class="resource-header">
                    <div class="resource-icon">
                      <i :class="getResourceIcon(resource.type)"></i>
                    </div>
                    <div class="resource-type">{{ getResourceTypeText(resource.type) }}</div>
                  </div>
                  <div class="resource-body">
                    <h3 class="resource-title">{{ resource.title }}</h3>
                    <p class="resource-desc">{{ resource.description }}</p>
                  </div>
                  <div class="resource-footer">
                    <div class="resource-meta">
                      <span class="views">
                        <i class="el-icon-view"></i> {{ resource.views }}
                      </span>
                      <span class="downloads">
                        <i class="el-icon-download"></i> {{ resource.downloads }}
                      </span>
                    </div>
                    <el-button type="primary" size="small" @click="viewResource(resource)">
                      {{ getActionText(resource.type) }}
                    </el-button>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="totalResources"
              :page-size="pageSize"
              :current-page.sync="currentPage"
              @current-change="handlePageChange"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="guides-section">
      <h2 class="section-title">创作指南</h2>
      <el-collapse accordion>
        <el-collapse-item v-for="(guide, index) in guides" :key="index" :title="guide.title" :name="index">
          <div v-html="guide.content"></div>
          <div class="guide-actions">
            <el-button type="text" @click.stop="viewGuideDetail(guide)">
              查看完整指南 <i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 资源预览对话框 -->
    <el-dialog
      :title="currentResource.title"
      :visible.sync="resourceDialogVisible"
      width="70%"
      class="resource-dialog"
    >
      <div class="resource-detail">
        <div class="resource-info">
          <div class="resource-type-badge" :class="'type-' + currentResource.type">
            {{ getResourceTypeText(currentResource.type) }}
          </div>
          <div class="resource-description">
            <h3>资源描述</h3>
            <p>{{ currentResource.description }}</p>
          </div>
          <div class="resource-meta-info">
            <div class="meta-item">
              <span class="label">发布时间:</span>
              <span class="value">{{ currentResource.publishTime }}</span>
            </div>
            <div class="meta-item">
              <span class="label">文件大小:</span>
              <span class="value">{{ currentResource.fileSize }}</span>
            </div>
            <div class="meta-item">
              <span class="label">浏览次数:</span>
              <span class="value">{{ currentResource.views }}</span>
            </div>
            <div class="meta-item">
              <span class="label">下载次数:</span>
              <span class="value">{{ currentResource.downloads }}</span>
            </div>
          </div>
        </div>
        <div class="resource-preview" v-if="currentResource.previewUrl">
          <h3>资源预览</h3>
          <div class="preview-content">
            <img v-if="isImagePreview(currentResource.previewUrl)" :src="currentResource.previewUrl" alt="资源预览">
            <iframe v-else-if="isDocPreview(currentResource.previewUrl)" :src="currentResource.previewUrl" frameborder="0"></iframe>
            <video v-else-if="isVideoPreview(currentResource.previewUrl)" :src="currentResource.previewUrl" controls></video>
            <div v-else class="no-preview">
              <i class="el-icon-document"></i>
              <p>无法预览此类型资源</p>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resourceDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="downloadResource(currentResource)">
          <i class="el-icon-download"></i> 下载资源
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'

export default {
  name: 'CreatorResources',
  data() {
    return {
      loading: false,
      searchQuery: '',
      currentCategory: 'all',
      activeTab: 'recommended',
      currentPage: 1,
      pageSize: 12,
      totalResources: 0,
      resources: [],
      guides: [],
      resourceDialogVisible: false,
      currentResource: {}
    }
  },
  computed: {
    displayResources() {
      return this.resources
    }
  },
  created() {
    this.fetchResources()
    this.fetchGuides()
  },
  methods: {
    async fetchResources() {
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          limit: this.pageSize,
          category: this.currentCategory !== 'all' ? this.currentCategory : undefined,
          sort: this.activeTab,
          query: this.searchQuery || undefined
        }
        const response = await api.creator.getCreatorResources(params)
        this.resources = response.data.items
        this.totalResources = response.data.total
      } catch (error) {
        console.error('获取创作者资源失败:', error)
        this.$message.error('获取资源失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },
    async fetchGuides() {
      try {
        const response = await api.creator.getCreatorGuides()
        this.guides = response.data
      } catch (error) {
        console.error('获取创作指南失败:', error)
      }
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchResources()
    },
    handleCategoryChange() {
      this.currentPage = 1
      this.fetchResources()
    },
    handleTabClick() {
      this.currentPage = 1
      this.fetchResources()
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchResources()
    },
    viewResource(resource) {
      this.currentResource = resource
      this.resourceDialogVisible = true
    },
    downloadResource(resource) {
      // 实际开发中应该调用API下载资源
      this.$message.success(`开始下载资源: ${resource.title}`)
      window.open(resource.downloadUrl, '_blank')
      this.resourceDialogVisible = false
    },
    viewGuideDetail(guide) {
      // 实际开发中可以跳转到详情页或打开新窗口
      window.open(guide.url, '_blank')
    },
    getResourceIcon(type) {
      const iconMap = {
        guide: 'el-icon-document',
        tool: 'el-icon-s-tools',
        template: 'el-icon-document-copy',
        video: 'el-icon-video-camera'
      }
      return iconMap[type] || 'el-icon-document'
    },
    getResourceTypeText(type) {
      const typeMap = {
        guide: '创作指南',
        tool: '创作工具',
        template: '模板素材',
        video: '视频教程'
      }
      return typeMap[type] || '其他资源'
    },
    getActionText(type) {
      const actionMap = {
        guide: '查看指南',
        tool: '获取工具',
        template: '使用模板',
        video: '观看视频'
      }
      return actionMap[type] || '查看资源'
    },
    isImagePreview(url) {
      return /\.(jpg|jpeg|png|gif|webp)$/i.test(url)
    },
    isDocPreview(url) {
      return /\.(pdf|doc|docx|ppt|pptx)$/i.test(url)
    },
    isVideoPreview(url) {
      return /\.(mp4|webm|ogg)$/i.test(url)
    }
  }
}
</script>

<style lang="scss" scoped>
.creator-resources {
  padding: 20px;

  .page-header {
    text-align: center;
    margin-bottom: 30px;

    .page-title {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #303133;
    }

    .page-desc {
      font-size: 16px;
      color: #606266;
    }
  }

  .filter-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .search-input {
      width: 300px;
      margin-bottom: 15px;
    }

    .el-radio-group {
      margin-bottom: 15px;
    }
  }

  .resources-container {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .resources-list {
      margin-top: 20px;
    }

    .resource-card {
      height: 100%;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      transition: transform 0.3s;
      display: flex;
      flex-direction: column;

      &:hover {
        transform: translateY(-5px);
      }

      .resource-header {
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #f5f7fa;

        .resource-icon {
          font-size: 24px;
          color: #409EFF;
        }

        .resource-type {
          font-size: 12px;
          padding: 2px 8px;
          border-radius: 10px;
          background-color: #ecf5ff;
          color: #409EFF;
        }
      }

      .resource-body {
        padding: 15px;
        flex: 1;

        .resource-title {
          font-size: 16px;
          font-weight: bold;
          margin: 0 0 10px;
          color: #303133;
        }

        .resource-desc {
          font-size: 13px;
          color: #606266;
          line-height: 1.5;
          height: 60px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }

      .resource-footer {
        padding: 10px 15px;
        border-top: 1px solid #ebeef5;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .resource-meta {
          font-size: 12px;
          color: #909399;

          .views, .downloads {
            margin-right: 10px;

            i {
              margin-right: 3px;
            }
          }
        }
      }
    }

    .pagination {
      margin-top: 20px;
      text-align: center;
    }
  }

  .guides-section {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .section-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center;
      color: #303133;
    }

    .guide-actions {
      margin-top: 10px;
      text-align: right;
    }
  }
}

.resource-dialog {
  .resource-detail {
    .resource-info {
      margin-bottom: 20px;

      .resource-type-badge {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        margin-bottom: 15px;

        &.type-guide {
          background-color: #409EFF;
        }

        &.type-tool {
          background-color: #67C23A;
        }

        &.type-template {
          background-color: #E6A23C;
        }

        &.type-video {
          background-color: #F56C6C;
        }
      }

      .resource-description {
        margin-bottom: 15px;

        h3 {
          font-size: 16px;
          margin-bottom: 10px;
        }

        p {
          color: #606266;
          line-height: 1.6;
        }
      }

      .resource-meta-info {
        display: flex;
        flex-wrap: wrap;
        background-color: #f5f7fa;
        padding: 10px;
        border-radius: 4px;

        .meta-item {
          width: 50%;
          margin-bottom: 5px;
          font-size: 13px;

          .label {
            color: #909399;
            margin-right: 5px;
          }

          .value {
            color: #606266;
            font-weight: bold;
          }
        }
      }
    }

    .resource-preview {
      h3 {
        font-size: 16px;
        margin-bottom: 10px;
      }

      .preview-content {
        border: 1px solid #ebeef5;
        border-radius: 4px;
        overflow: hidden;
        height: 400px;

        img, iframe, video {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        .no-preview {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #909399;

          i {
            font-size: 48px;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .creator-resources {
    .filter-section {
      flex-direction: column;
      align-items: stretch;

      .search-input {
        width: 100%;
      }

      .el-radio-group {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
      }
    }

    .resource-dialog {
      .resource-detail {
        .resource-info {
          .resource-meta-info {
            .meta-item {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style> 